{% extends "base.html" %}

{%block style %}
<link href="/static_media/css/main/index.css" rel="stylesheet" type="text/css" >
{%endblock style %}

{% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var blueIcon = {
				url:"/static_media/images/pin_blue.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			
			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng(54.6, -2.46),
			  zoom: 5,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);
			
			var positionArray = new Array();
			var markerArray = new Array();
			var titleArray = new Array();
			var urlArray = new Array();
			
			{% for outcrop in outcrop_list %}
			positionArray.push( new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}));
			titleArray.push("{{outcrop.name}}");
			urlArray.push("/outcrop/{{outcrop.pk}}/");
			{% endfor %}
			
			for (i=0; i<positionArray.length; i++)
			{
				markerArray.push( new google.maps.Marker({ position: positionArray[i], map: map, title: titleArray[i], icon:blueIcon, url: urlArray[i] }) );
				
				google.maps.event.addListener(markerArray[i], 'click', function(event) {
					window.location.href = this.url
				});
			}
		}
    </script>
{% endblock script %}

{% block content %}
    <div class="left">
      <div id="auth">
        <div id="signup">
          <form action="/register/" method="get">
            {% csrf_token %} <br>
            Sign Up Now! <br />
            <input type="submit" name="Register" value="Register" id="signupButton" class="button"/>
          </form>
        </div>
        <div id="login">
		{% if not user.is_authenticated %}
			<form action="/login/" method="post">
				{% csrf_token %}
					<div class="fieldError"> {{ loginForm.non_field_errors }} </div>
					<div class="fieldError"> {{state}} </div>
					<label for="id_name" class="fieldHeading" >Username</label>
					<div class="fieldError"> {{ loginForm.username.errors }} </div>
					<div class="fieldWrapper"> {{ loginForm.username }} </div>
					
					<label for="id_name" class="fieldHeading" >Password</label>
					<div class="fieldError"> {{ loginForm.password.errors }} </div>
					<div class="fieldWrapper"> {{ loginForm.password }} </div>
				<input type="submit" name="login" value="   Log In   " id="loginButton" class="button"/>
			</form>
		{% else %}
			You are already logged in.
		{% endif %}
        </div>
		
      </div>
	  <div class="item">
	  	<div class="itemHeading"> Outcrops </div>
	  	<div id="map"> </div>
	  </div>
    </div>
    <!-- end .left -->
    
    <div class="right">
		<div id="textArea">
			<div id="welcomeText">
			This website is still in the beta stage. Users are welcome to sign up and take a look at the website but are hereby warned that 
			any content uploaded may not be saved or available for future use.
			</div>
		</div>
	</div>
    <!-- end .right --> 
{% endblock content %}